<template>
  <div class="product-detail">
    <div class="container">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/category' }">{{ product.category }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ product.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="product-content">
        <!-- 左侧商品图片区域 -->
        <div class="product-gallery">
          <div class="main-image">
            <img :src="currentImage" :alt="product.name" @click="showImagePreview">
            <div class="play-button" v-if="product.video">
              <i class="el-icon-video-play"></i>
            </div>
          </div>
          <div class="thumbnail-list">
            <div 
              v-for="(image, index) in product.images" 
              :key="index"
              :class="['thumbnail', { active: currentImageIndex === index }]"
              @click="selectImage(index)"
            >
              <img :src="image" :alt="product.name">
            </div>
          </div>
        </div>

        <!-- 右侧商品信息区域 -->
        <div class="product-info">
          <!-- 商品标题 -->
          <div class="product-title">
            <h1>{{ product.name }}</h1>
            <div class="brand-info">
              <span class="brand">{{ product.brand }}</span>
              <span class="store-type">{{ product.storeType }}</span>
            </div>
          </div>

          <!-- 价格信息 -->
          <div class="price-section">
            <div class="current-price">
              <span class="price-symbol">¥</span>
              <span class="price-value">{{ product.price }}</span>
              <span class="price-label">到手价</span>
            </div>
            <div class="original-price">
              <span class="original-price-value">¥{{ product.originalPrice }}</span>
            </div>
            <div class="discount-info">
              <span class="discount-tag">满{{ product.discountThreshold }}减{{ product.discountAmount }}</span>
            </div>
          </div>

          <!-- 促销信息 -->
          <div class="promotion-section">
            <div class="promotion-item" v-for="promotion in product.promotions" :key="promotion.id">
              <span class="promotion-tag">{{ promotion.tag }}</span>
              <span class="promotion-desc">{{ promotion.description }}</span>
            </div>
          </div>

          <!-- 商品选择 -->
          <div class="product-options">
            <div class="option-group" v-for="option in product.options" :key="option.name">
              <div class="option-label">{{ option.name }}</div>
              <div class="option-values">
                <div 
                  v-for="value in option.values" 
                  :key="value.id"
                  :class="['option-value', { active: selectedOptions[option.name] === value.id }]"
                  @click="selectOption(option.name, value.id)"
                >
                  <img v-if="value.image" :src="value.image" :alt="value.name">
                  <span>{{ value.name }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 数量选择 -->
          <div class="quantity-section">
            <div class="quantity-label">数量</div>
            <div class="quantity-control">
              <el-input-number 
                v-model="quantity" 
                :min="1" 
                :max="99"
                size="medium"
              ></el-input-number>
            </div>
          </div>

          <!-- 配送信息 -->
          <div class="delivery-section">
            <div class="delivery-info">
              <i class="el-icon-location"></i>
              <span>送至：{{ deliveryAddress }}</span>
            </div>
            <div class="delivery-time">
              <span>预计{{ deliveryTime }}送达</span>
            </div>
          </div>

          <!-- 购买按钮 -->
          <div class="action-buttons">
            <el-button 
              type="danger" 
              size="large" 
              class="add-to-cart"
              @click="addToCart"
            >
              加入购物车
            </el-button>
            <el-button 
              type="danger" 
              size="large" 
              class="buy-now"
              @click="buyNow"
            >
              立即购买
            </el-button>
          </div>

          <!-- 服务保障 -->
          <div class="service-guarantee">
            <div class="service-item" v-for="service in product.services" :key="service.id">
              <i :class="service.icon"></i>
              <span>{{ service.name }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品详情 -->
      <div class="product-details">
        <el-tabs v-model="activeTab" class="detail-tabs">
          <el-tab-pane label="商品详情" name="detail">
            <div class="detail-content" v-html="product.detailContent"></div>
          </el-tab-pane>
          <el-tab-pane label="规格参数" name="specs">
            <div class="specs-content">
              <el-descriptions :column="2" border>
                <el-descriptions-item 
                  v-for="spec in product.specifications" 
                  :key="spec.name"
                  :label="spec.name"
                >
                  {{ spec.value }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
          <el-tab-pane label="用户评价" name="reviews">
            <div class="reviews-content">
              <div class="review-item" v-for="review in product.reviews" :key="review.id">
                <div class="review-header">
                  <span class="reviewer">{{ review.reviewer }}</span>
                  <span class="review-date">{{ review.date }}</span>
                  <el-rate v-model="review.rating" disabled></el-rate>
                </div>
                <div class="review-content">{{ review.content }}</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductDetail',
  data() {
    return {
      currentImageIndex: 0,
      quantity: 1,
      activeTab: 'detail',
      selectedOptions: {},
      deliveryAddress: '浙江杭州市滨江区长河街道',
      deliveryTime: '08月09日(周六)',
      product: {
        id: '1',
        name: '7号楼自制早餐套餐',
        brand: '7号楼',
        storeType: '自营',
        category: '早餐早点',
        price: '16.8',
        originalPrice: '25.0',
        discountThreshold: 50,
        discountAmount: 5,
        images: [
          'https://modao.cc/ai/uploads/ai_pics/10/102073/aigp_1754518088.jpeg',
          'https://modao.cc/ai/uploads/ai_pics/10/102074/aigp_1754518091.jpeg',
          'https://modao.cc/ai/uploads/ai_pics/10/102075/aigp_1754518093.jpeg'
        ],
        video: null,
        promotions: [
          { id: 1, tag: '满额返券', description: '满50减5元' },
          { id: 2, tag: '限时优惠', description: '限时8折' }
        ],
        options: [
          {
            name: '规格',
            values: [
              { id: 'standard', name: '标准套餐', image: null },
              { id: 'large', name: '大份套餐', image: null }
            ]
          }
        ],
        services: [
          { id: 1, name: '正品保证', icon: 'el-icon-check' },
          { id: 2, name: '极速发货', icon: 'el-icon-ship' },
          { id: 3, name: '7天退换', icon: 'el-icon-refresh' }
        ],
        specifications: [
          { name: '商品名称', value: '7号楼自制早餐套餐' },
          { name: '商品类型', value: '早餐套餐' },
          { name: '保质期', value: '当天食用' },
          { name: '配送时间', value: '10点前下单' }
        ],
        reviews: [
          {
            id: 1,
            reviewer: '张**',
            date: '2024-01-15',
            rating: 5,
            content: '早餐很新鲜，牛角包很酥脆，咖啡也很香浓，推荐！'
          }
        ],
        detailContent: `
          <h3>商品详情</h3>
          <p>7号楼自制早餐套餐，包含现烤牛角包和香浓咖啡。</p>
          <p>牛角包采用优质面粉制作，外酥内软，口感极佳。</p>
          <p>咖啡选用优质咖啡豆，现磨现冲，香气浓郁。</p>
        `
      }
    }
  },
  computed: {
    currentImage() {
      return this.product.images[this.currentImageIndex] || this.product.images[0]
    }
  },
  created() {
    // 根据路由参数获取商品信息
    const productId = this.$route.params.id
    console.log('Product ID:', productId)
    
    // 这里应该从API或store获取商品详情
    // 暂时使用模拟数据，实际项目中应该从后端API获取
    this.loadProductData(productId)
  },
  methods: {
    loadProductData(productId) {
      // 模拟商品数据，实际项目中应该从API获取
      const mockProducts = {
        '1': {
          id: '1',
          name: '7号楼自制早餐套餐',
          brand: '7号楼',
          storeType: '自营',
          category: '早餐早点',
          price: '16.8',
          originalPrice: '25.0',
          discountThreshold: 50,
          discountAmount: 5,
          images: [
            'https://modao.cc/ai/uploads/ai_pics/10/102073/aigp_1754518088.jpeg',
            'https://modao.cc/ai/uploads/ai_pics/10/102074/aigp_1754518091.jpeg',
            'https://modao.cc/ai/uploads/ai_pics/10/102075/aigp_1754518093.jpeg'
          ],
          video: null,
          promotions: [
            { id: 1, tag: '满额返券', description: '满50减5元' },
            { id: 2, tag: '限时优惠', description: '限时8折' }
          ],
          options: [
            {
              name: '规格',
              values: [
                { id: 'standard', name: '标准套餐', image: null },
                { id: 'large', name: '大份套餐', image: null }
              ]
            }
          ],
          services: [
            { id: 1, name: '正品保证', icon: 'el-icon-check' },
            { id: 2, name: '极速发货', icon: 'el-icon-ship' },
            { id: 3, name: '7天退换', icon: 'el-icon-refresh' }
          ],
          specifications: [
            { name: '商品名称', value: '7号楼自制早餐套餐' },
            { name: '商品类型', value: '早餐套餐' },
            { name: '保质期', value: '当天食用' },
            { name: '配送时间', value: '10点前下单' }
          ],
          reviews: [
            {
              id: 1,
              reviewer: '张**',
              date: '2024-01-15',
              rating: 5,
              content: '早餐很新鲜，牛角包很酥脆，咖啡也很香浓，推荐！'
            }
          ],
          detailContent: `
            <h3>商品详情</h3>
            <p>7号楼自制早餐套餐，包含现烤牛角包和香浓咖啡。</p>
            <p>牛角包采用优质面粉制作，外酥内软，口感极佳。</p>
            <p>咖啡选用优质咖啡豆，现磨现冲，香气浓郁。</p>
          `
        },
        '2': {
          id: '2',
          name: '乐高星球大战套装',
          brand: '乐高',
          storeType: '自营',
          category: '二手玩具',
          price: '320',
          originalPrice: '450',
          discountThreshold: 300,
          discountAmount: 30,
          images: [
            'https://modao.cc/ai/uploads/ai_pics/10/102074/aigp_1754518091.jpeg'
          ],
          video: null,
          promotions: [
            { id: 1, tag: '二手商品', description: '9成新，完整未开封' },
            { id: 2, tag: '限时优惠', description: '限时7折' }
          ],
          options: [
            {
              name: '规格',
              values: [
                { id: 'standard', name: '标准版', image: null },
                { id: 'deluxe', name: '豪华版', image: null }
              ]
            }
          ],
          services: [
            { id: 1, name: '正品保证', icon: 'el-icon-check' },
            { id: 2, name: '极速发货', icon: 'el-icon-ship' },
            { id: 3, name: '7天退换', icon: 'el-icon-refresh' }
          ],
          specifications: [
            { name: '商品名称', value: '乐高星球大战套装' },
            { name: '商品类型', value: '玩具' },
            { name: '适用年龄', value: '10岁以上' },
            { name: '商品状态', value: '9成新' }
          ],
          reviews: [
            {
              id: 1,
              reviewer: '李**',
              date: '2024-01-10',
              rating: 5,
              content: '乐高质量很好，孩子很喜欢，拼装过程很有趣！'
            }
          ],
          detailContent: `
            <h3>商品详情</h3>
            <p>乐高星球大战套装，完整未开封，适合10岁以上儿童。</p>
            <p>包含详细的拼装说明书，拼装完成后效果非常棒。</p>
            <p>适合收藏和玩耍，是送给孩子的最佳礼物。</p>
          `
        }
      }
      
      if (mockProducts[productId]) {
        this.product = mockProducts[productId]
      } else {
        // 如果找不到商品，显示默认商品或错误信息
        this.$message.error('商品不存在')
        this.$router.push('/')
      }
    },
    selectImage(index) {
      this.currentImageIndex = index
    },
    selectOption(optionName, valueId) {
      this.$set(this.selectedOptions, optionName, valueId)
    },
    showImagePreview() {
      // 这里可以添加图片预览功能
      this.$message.info('图片预览功能开发中...')
    },
    addToCart() {
      this.$message.success('已添加到购物车')
    },
    buyNow() {
      this.$message.success('正在跳转到支付页面...')
    }
  }
}
</script>

<style lang="scss" scoped>
.product-detail {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.breadcrumb {
  margin-bottom: 20px;
  padding: 10px 0;
}

.product-content {
  display: flex;
  gap: 40px;
  background: white;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.product-gallery {
  flex: 0 0 400px;
  
  .main-image {
    position: relative;
    width: 100%;
    height: 400px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
    }
  }
  
  .thumbnail-list {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    
    .thumbnail {
      width: 80px;
      height: 80px;
      border: 2px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s;
      
      &.active {
        border-color: #409eff;
      }
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.product-info {
  flex: 1;
  
  .product-title {
    margin-bottom: 20px;
    
    h1 {
      font-size: 24px;
      color: #303133;
      margin-bottom: 10px;
      line-height: 1.4;
    }
    
    .brand-info {
      .brand {
        color: #409eff;
        font-weight: 500;
        margin-right: 10px;
      }
      
      .store-type {
        color: #909399;
        font-size: 14px;
      }
    }
  }
  
  .price-section {
    margin-bottom: 20px;
    
    .current-price {
      display: flex;
      align-items: baseline;
      margin-bottom: 10px;
      
      .price-symbol {
        font-size: 20px;
        color: #f56c6c;
        font-weight: bold;
      }
      
      .price-value {
        font-size: 32px;
        color: #f56c6c;
        font-weight: bold;
        margin: 0 5px;
      }
      
      .price-label {
        font-size: 14px;
        color: #909399;
      }
    }
    
    .original-price {
      margin-bottom: 10px;
      
      .original-price-value {
        font-size: 16px;
        color: #909399;
        text-decoration: line-through;
      }
    }
    
    .discount-info {
      .discount-tag {
        background: #fef0f0;
        color: #f56c6c;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
      }
    }
  }
  
  .promotion-section {
    margin-bottom: 20px;
    
    .promotion-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      
      .promotion-tag {
        background: #f0f9ff;
        color: #409eff;
        padding: 2px 6px;
        border-radius: 2px;
        font-size: 12px;
        margin-right: 8px;
      }
      
      .promotion-desc {
        color: #606266;
        font-size: 14px;
      }
    }
  }
  
  .product-options {
    margin-bottom: 20px;
    
    .option-group {
      margin-bottom: 15px;
      
      .option-label {
        font-weight: 500;
        color: #303133;
        margin-bottom: 8px;
      }
      
      .option-values {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        
        .option-value {
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          padding: 8px 12px;
          cursor: pointer;
          transition: all 0.3s;
          display: flex;
          align-items: center;
          gap: 5px;
          
          &.active {
            border-color: #409eff;
            color: #409eff;
          }
          
          img {
            width: 20px;
            height: 20px;
            object-fit: cover;
            border-radius: 2px;
          }
        }
      }
    }
  }
  
  .quantity-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    
    .quantity-label {
      margin-right: 15px;
      color: #303133;
      font-weight: 500;
    }
  }
  
  .delivery-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
    
    .delivery-info {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      
      i {
        color: #409eff;
        margin-right: 5px;
      }
    }
    
    .delivery-time {
      color: #606266;
      font-size: 14px;
    }
  }
  
  .action-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    
    .add-to-cart,
    .buy-now {
      flex: 1;
      height: 50px;
      font-size: 16px;
    }
  }
  
  .service-guarantee {
    display: flex;
    gap: 20px;
    
    .service-item {
      display: flex;
      align-items: center;
      color: #606266;
      font-size: 14px;
      
      i {
        margin-right: 5px;
        color: #409eff;
      }
    }
  }
}

.product-details {
  background: white;
  padding: 30px;
  border-radius: 8px;
  
  .detail-tabs {
    ::v-deep .el-tabs__header {
      margin-bottom: 20px;
    }
  }
  
  .detail-content {
    line-height: 1.6;
    color: #606266;
  }
  
  .specs-content {
    padding: 20px 0;
  }
  
  .reviews-content {
    .review-item {
      border-bottom: 1px solid #e4e7ed;
      padding: 15px 0;
      
      .review-header {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        
        .reviewer {
          font-weight: 500;
          margin-right: 10px;
        }
        
        .review-date {
          color: #909399;
          font-size: 12px;
          margin-right: 10px;
        }
      }
      
      .review-content {
        color: #606266;
        line-height: 1.5;
      }
    }
  }
}

@media (max-width: 768px) {
  .product-content {
    flex-direction: column;
    gap: 20px;
  }
  
  .product-gallery {
    flex: none;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style>
